<template>
	<view class="page">
		<!-- 翻转镜头按钮 -->
		<image @click="switchCamera" class="camera" src="@/static/broadcast/camera.png" />
		<!-- 表单 -->
		<view class="form">
			<view class="form-item  flex-center flex-space-between">
				<view class="cover" @click="chooseImage">
					<view class="relative" v-if="cover">
						<image class="cover-img" :src="cover" />
						<view class="cover-btn"><text class="text-white cover-btn-text fs-20">更换封面</text></view>
					</view>
					<view class="add-ico flex-center" v-else>
						<text class="text-white fs-80">+</text>
					</view>
				</view>
				<view class="value flex-1">
					<view class="input_name">
						<input v-model="name" placeholder-color="#ffffff" class="fs-26 text-white" :maxlength="10"
							placeholder="请输入直播间名称" />
					</view>
					<view class="">
						<picker @change="bindPickerChange" range-key="text" :value="typeIndex" :range="range">
							<view class="flex-center flex-space-between"><text
									class="fs-26 text-white">{{typeIndex>=0?range[typeIndex].text:'请选择分类'}}</text>
								<image class="arrow-bottom" src="@/static/broadcast/arrow-bottom.png" mode="aspectFit">
								</image>
							</view>
						</picker>
					</view>
				</view>

			</view>
			<view class="form-item">
				<view class="flex-center flex-space-between">
					<view class="label">
						<text class="text-white fs-26">是否播放录制视频</text>
					</view>
					<view class="value">
						<switch class="switch-checked" color="#4fb784" :checked="checked" @change="switch1Change" />
					</view>
				</view>

				<view class="cover" v-if="checked" @click="chooseVideo">
					<view class="relative" v-if="video">
						<!-- 暂且先放个 video，实际可能不需要，考虑弄个视频封面什么的 -->
						<video class="add-ico" :src="video"></video>
						<view class="cover-btn"><text class="text-white cover-btn-text fs-20">更换视频</text></view>
					</view>
					<view class="add-ico flex-center" v-else>
						<text class="text-white fs-80">+</text>
					</view>
				</view>
			</view>



			<view class="btns flex-center">
				<view class="btn btn1" @click="setBeautyLevel">
					<image class="beautiful-ico" src="@/static/broadcast/beautiful.png" />
					<view class="">
						<text class="text-white fs-26">{{beautyLevel==0?'开启':'关闭'}}</text>
						<text class="text-white fs-26">美颜</text>
					</view>
				</view>
				<view class="btn btn2 text-white" @click="createRoom">
					<text class="text-white fs-30">开启视频直播</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 创建直播间页
	 */
	import UniDataSelect from "@/uni_modules/uni-data-select"
	export default {
		components: {
			UniDataSelect
		},
		data() {
			return {
				checked: false, ///是否录播
				typeIndex: -1, //选择的索引
				name: "", ///名称
				cover: "", //封面
				video: "", //视频

				beautyLevel: 0, ///美颜等级 0-1
				range: [{ ///分类数组
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
			}
		},
		methods: {
			/**
			 * 创建直播间
			 */
			createRoom() {
				///开启推流&&切换页面
				this.$emit("createRoom")
			},
			/**
			 * 选取封面
			 */
			chooseImage() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						if (res.tempFilePaths.length) {
							this.cover = res.tempFilePaths[0]
						}
					}
				});
			},
			/**
			 * 选取视频
			 * @param {Object} e
			 */
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['album'],
					compressed: false,
					success: (res) => {
						this.video = res.tempFilePath;
					}
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.typeIndex = e.detail.value
			},
			switch1Change: function(e) {

				this.checked = e.detail.value
				if (!this.checked) { ///清空视频地址
					this.video = ""
				}
			},

			switchCamera() {
				this.$emit("switchCamera")
			},
			setBeautyLevel() {
				if (this.beautyLevel == 0) { ///暂且0视为关闭美颜
					this.beautyLevel = 9
				} else {
					this.beautyLevel = 0
				}
				this.$emit("setBeautyLevel", this.beautyLevel)
			},
		}
	}
</script>

<style lang="scss">
	.relative {
		position: relative;
	}
	.fs-80 {
		font-size: 80rpx;
	}

	.fs-30 {
		font-size: 30rpx;
	}

	.fs-20 {
		font-size: 20rpx;
	}

	.text-white {
		color: #fff;
	}

	.page {
		padding-top: 380rpx;
	}

	.flex-center {
		flex-direction: row;
		align-items: center;
	}

	.flex-space-between {
		justify-content: space-between;
	}

	.flex-1 {
		flex: 1;
	}

	.camera {
		width: 76rpx;
		height: 76rpx;
		position: fixed;
		top: 40rpx;
		right: 30rpx;
	}

	.cover-img {
		height: 200rpx;
		width: 150rpx;
	}

	.cover-btn {
		height: 44rpx;
		background-color: $uni-bg-color-mask;
		position: absolute;
		bottom: 0;
		width: 100%;
		justify-content: center;
	}

	.cover-btn-text {
		line-height: 44rpx;
	}

	.form-item {
		background-color: $uni-bg-color-mask;
		border-radius: $uni-border-radius-lg;
		padding: 20rpx;
		margin: 20rpx
	}


	.value {
		padding-left: 30rpx;

	}

	.cover {
		height: 200rpx;
		width: 150rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-mask;
	}

	.add-ico {
		height: 200rpx;
		font-size: 50rpx;
	}

	.arrow-bottom {
		width: 30rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}


	.input_name {
		padding-bottom: 40rpx;
	}

	.btn1 {
		height: 100rpx;
		font-size: 26rpx;
	}

	.btns {
		padding-top: 88rpx;
	}

	.btn {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
	}

	.btn1 {
		height: 100rpx;
		flex-direction: row;
		border-radius: 999rpx;
		margin-right: 24rpx;
		background: linear-gradient(to right, #fc686f, #fe924d);
	}

	.btn2 {
		height: 100rpx;
		border-radius: 999rpx;
		background: linear-gradient(to right, #4fb784, #a4d79f);
	}

	.beautiful-ico {
		width: 50rpx;
		height: 50rpx;
		margin-right: 6rpx;
	}
</style>